 //实现全选、取消事件编写
 document.querySelector('div>button:nth-of-type(1)')
 .addEventListener("click",(event)=>{
    var text = event.target.innerText
    var flag=false
    if(text=="全选"){
         text="取消"
        flag=true
    }else{
        text="全选"
        flag=false
    }
    document.querySelectorAll('tbody input[type="checkbox"]')
    .forEach(box=>{
        box.checked=flag
     })
event.target.innerText=text
 })
 //实现添加事件处理
 document.querySelector('div>button:nth-of-type(2)')
 .addEventListener('click',(event)=>{
     if(isEdit){
        return
    }
    var tbody=document.querySelector('table>tbody')
    var tbody=document.querySelector('table>tbody')
    var row=tbody.insertRow()
    var td1=row.insertCell()
    td1.innerHTML='<input type="checkbox">'
    var td2=row.insertCell()
    var preRow=row.previousElementSibling     //兄弟元素
    if(preRow)
    td2.innerText=+preRow.children[1].innerText+1
    else
    td2.innerText=1
    var td3=row.insertCell()
    td3.innerText='王五'
    var td4=row.insertCell()
    td4.innerText='18'
    var td5=row.insertCell()
    td5.innerText='男'
    var td6=row.insertCell()
    var btn1=document.createElement('button')
    btn1.innerText="修改"
    var btn2=document.createElement('button')
    btn2.innerText="删除"
    td6.appendChild(btn1)
    td6.appendChild(btn2)
    document.dispatchEvent(myEvent)
 })

 // 实现删除选中行
 document.querySelector('div>button:nth-of-type(3)')
 .addEventListener('click',(event)=>{
    if(isEdit)return
    var checkedbox=document.querySelectorAll('tbody input:checked')
    checkedbox.forEach(box=>{
        box.parentElement.parentElement.remove()
        document.dispatchEvent(myEvent)
    })
    document.querySelector('div>button:nth-of-type(1)').innerText="全选"
 })
 var isEdit=false

 // 实现删除当前行
 document.querySelector("table")
 .addEventListener('click',(event)=>{
    if(isEdit)return
   
    var btn = event.target
    if(btn.tagName.toLowerCase()=="button"&&btn.innerText.indexOf('删除')>-1){
        btn.parentElement.parentElement.remove()
    }
    document.dispatchEvent(myEvent)
 })

 //实现修改和保存
 document.querySelector('table')
 .addEventListener('click',(event)=>{
    var btn=event.target
    isEdit=true
    if(btn.tagName.toLowerCase()=='button'&&btn.innerText.indexOf('修改')>-1){
        var row = btn.parentElement.parentElement
        td2=row.children[2]
        td3=row.children[3]
        td4=row.children[4]
        var nameInput=document.createElement('input')
        nameInput.value=td2.innerText
        td2.replaceChild(nameInput,td2.firstChild)
        var ageInput=document.createElement('input')
        ageInput.value=td3.innerText
        td3.replaceChild(ageInput,td3.firstChild)
        var genderInput=document.createElement('input')
        genderInput.value=td4.innerText
        td4.replaceChild(genderInput,td4.firstChild)
        btn.innerText="保存"
        return
    }
    if(btn.tagName.toLowerCase()=='button'&&btn.innerText.indexOf('保存')>-1){
        var row = btn.parentElement.parentElement
        var td2=row.children[2]
        var td3=row.children[3]
        var td4=row.children[4]
        var name=td2.firstChild.value
        if(name.length<2||name.length>10){
            td2.firstChild.style.color="red"
            alert("名字是两个字到十个字")
            return
        }
        td2.innerText=td2.firstChild.value
        td3.innerText=td3.firstChild.value
        td4.innerText=td4.firstChild.value
        btn.innerText="修改"
        document.dispatchEvent(myEvent)
    }
    isEdit=false
 })
 var myEvent = new Event('tongji')
document.addEventListener('tongji',(event)=>{
    document.querySelector('#total').innerText=document.querySelectorAll('tbody>tr').length
    var tds =document.querySelectorAll('tbody>tr>td:nth-of-type(4)')
    var sum=0;
    tds.forEach(td=>{
        sum+=+td.innerText
    })
    var avg=sum/tds.length
    document.querySelector('#avg').innerText=parseInt(avg)
})  
document.dispatchEvent